extends layout


block content
	.container.list
		.row
			.page-header
				h3(data-bind="text: $root.Title")
				.navbar-right
					span.description(style="display: none")  총 게시물
						span#submittedCount(style="display: none", data-bind="text: $root.totalCount")

			.search-area
				div
					.navbar-left
						button.btn.btn-sm.btn-primary(type='button', data-bind="click: function(data) {$root.onReflashCommand($data)} ")
							span.glyphicon.glyphicon-refresh
					.navbar-right(role='search')
						.input-group
							input.form-control.input-sm(id='searchText', type='text', placeholder='검색', style='width:200px')
							span.input-group-btn
								button.btn.btn-sm.btn-primary(type='button', data-bind="click: function(data) {$root.onSearchCommand($data)} ") 검색
								button#btnWrite.btn.btn-sm.btn-success(type='button', data-bind="click: function(data) {$root.onCreateCommand($data)}") 등록

			if(request == "freeboard")
				table.table
					colgroup
						col(style='width: 10%;')
						col(data-bind="attr: { 'style': $root.setWidth('nickname')}")
						col(data-bind="attr: { 'style': $root.setWidth('subject')}")
						col(style='width: 15%;')
						col(style='width: 10%;')
						thead
						tr
							th(data-bind="attr: { 'style': $root.getMobile()}") 번호
							th 작성자
							th 제목
							th(data-bind="attr: { 'style': $root.getMobile()}") 날짜
							th(data-bind="attr: { 'style': $root.getMobile()}") 조회수
					tbody#tableBody(data-bind="foreach: boardList")
						tr
							td(data-bind="text: No, attr: { 'style': $root.getMobile()}")
							td(data-bind="text: NickName")
							td.left-align
								span
									a(data-bind="click: function(data) {$root.onSelect($data)} ", href="#")
										span(data-bind="text: Subject")
							td(data-bind="text: Date, attr: { 'style': $root.getMobile()}")
							td(data-bind="text: Count, attr: { 'style': $root.getMobile()}")
			else
				div.container
					ul.row(data-bind="foreach: boardList")
						li.col-md-2.col-sm-4.col-xs-6(style="margin-bottom:25px;list-style:none;")
							div
								img.img-responsive(style="width:100px;height:70px", data-bind="attr: {src: $root.getThumbNailImage($data)}")
							div
								table
									tr
										td
											div
												span
													a(data-bind="click: function(data) {$root.onSelect($data)} ", href="#")
														span(data-bind="text: Subject")
									tr
										td
											div
												span
													span(data-bind="text: Count, attr: { 'style': $root.getMobile()}")
													span(data-bind="text: Date, attr: { 'style': $root.getMobile()}")
									tr
										td
											div
												span(data-bind="text: NickName")






			button#moreButton.btn.btn-default.btn-block(data-bind="click: function(data) {$root.onMoreCommand($data)}") 10건 더보기

			#writeModal.modal.fade(role='dialog')
				.modal-dialog
					.modal-content
						.modal-header
							button.close(type='button', data-dismiss='modal', aria-hidden="true")
							h4#writeModalLabel.modal-title 글 작성
						.modal-body
							.input-group
								span.input-group-addon 제목
								input#subject.form-control(type='text', placeholder='제목을 입력 하세요!!!')
							.margin-top
								.input-group
									span.input-group-addon 내용
									textarea#bodyContent.maxwidth-textarea.form-control(rows='20')
								form#myForm.margin-top(action='/api/fileUpload', method='post', enctype='multipart/form-data')
									span.input-group
										span.input-group-btn
											span.file-input.btn.btn-primary.btn-file Browser
												input#imgs(type='file', name='imgs', multiple)
										input#selectText.form-control(type='text', readonly)


									#attachFileLayout(style='display: none')
										.margin-top 첨부파일 삭제
										#imagesLayout(data-bind="foreach: selectItem().images")
											form.well.form-inline(style='min-width: 300px;')
												label.checkbox
													input(type='checkbox', data-bind="attr: {'tag': $root.getFullName($data)}")
													span.label.label-success(data-bind='text: $root.getImageName($data)')

						.modal-footer
							button.btn.btn-default(type='button', data-dismiss='modal') 취소
							button#btnSave.btn.btn-primary(type='button', data-bind="click: function(data) {$root.onSaveCommand($data)}") 등록
			#readModal.modal.fade(role='dailog')
				.modal-dialog
					.modal-content
						.modal-header
							button.close(type='button', data-dismiss='modal', aria-hidden="true")
							.form-inline
								h4#writeModalLabel.modal-title 글 읽기
						.modal-body
							.input-group.input-group-sm(style='margin: 0 auto; border-bottom: 1px solid #EEE; width: 100%')
								span 제  목 :
								strong#readSubject(data-bind="text: $root.selectItem().subject")
							.form-group.margin-top.small
								.form-group
									.navbar-left
									span 글쓴이 :
									span(data-bind="text: $root.selectItem().nickname")
									.navbar-right
										span 작성일 :
										span 2014-05-09 21:33


								#readBodyContent(style="min-height:300px;border: 1px solid #ccc;padding: 10px;border-radius: 4px")
									#imagesLayout(data-bind="foreach: selectItem().images")
										image.margin-top(data-bind="attr: {src: $root.getImages($data)}", style="width: 100%; max-width: 760px; vertical-align: middle")

									#textLayout.margin-top(data-bind="text: $data.selectItem().body")
							.margin-top
								.panel.panel-success
									.panel-heading
										span.iconh3.panel-title 댓글
										span.badge.pull-right(data-bind="text: $root.selectItem().commentTotalCount")
									.panel-body
										.input-group.input-sm
											input#commentContent.input-sm.form-control(type="text")
											span.input-group-sm.input-group-btn
												button#addComment.btn-sm.btn.btn-default(type='button') 입력
										hr
										table(data-bind="foreach: $root.selectItem().comments")
											tr
												td.col-md-2
													span(data-bind="text: $data.commentID")
												td.col-md-5
													span(data-bind="text: $data.commentContent")
												td.col-md-5.right-algin
													span(data-bind="text: $data.last_update")


							.margin-top
								.form-group
									span.input-group
										span 이전글 :
											a(data-bind="click: function(data) {$root.onSelect($data.prevItem())} ", href="#")
												span(data-bind="text: $data.prevItem().subject")
									span.input-group
										span 다음글 :
											a(data-bind="click: function(data) {$root.onSelect($data.nextItem())} ", href="#")
												span(data-bind="text: $data.nextItem().subject")

						.modal-footer
							button.btn.btn-default(data-bind="attr: { 'style': $root.isOwner()}", type='button', data-dismiss='modal') 편집
							#btnDelete.button.btn.btn-default(type='button', data-bind="click: function(data) {$root.onDeleteCommand($data)}") 삭제
							#btnEdit.button.btn.btn-default(type='button', data-bind="click: function(data) {$root.onModifyCommand($data)}") 수정
							button.btn.btn-default(type='button', data-dismiss='modal') 닫기





block script
	script var request = !{JSON.stringify(request)};
	script var user = !{JSON.stringify(user)};
	script var isMobile = !{JSON.stringify(isMobile)};
	script(type='text/javascript', src='/javascripts/freeboard.js')





